<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="switchBasemap(0)">图层-创建</button>
        <button onclick="flyTo()">飞到</button>
        <button onclick="setCustomShader()">设置Shader</button>
        <button onclick="setStyle()">设置Style</button>
        <button onclick="setTilesetHeight()">设置高度</button>
        <button onclick="setTilesetScale()">缩放</button>
        <button onclick="setRotate()">旋转</button>
        <button onclick="setPosition()">修改位置</button>
        <button onclick="switchBasemap(1)">图层-隐藏</button>
        <button onclick="switchBasemap(2)">图层-显示</button>
        <button onclick="switchBasemap(3)">图层-移除</button>
        <button onclick="update3dtilesMaxtrix(3)">图层-旋转，缩放，平移</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        function switchBasemap(status) {
            if (status === 0) {
                layer = new cpc.Tile3dLayer({
                    name: "tile3d",
                    // url:"http://localhost/title3d/702aa950d03c11e99f7ddd77cbe22fea/tileset.json"
                    url: "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json",
                    // url:"./json/baimo/tileset.json"
                    // url:"http://cimaplite.szgeoinfo.com.cn:7101/gltf2/LOD/tileset.json"
                });
                map.add(layer); //添加到地图上的方式有两种---1
                // imageLayer.addToMap(map);//添加到地图上的方式有两种---2
            } else if (status === 1) {
                layer.show = false;
            } else if (status === 2) {
                layer.show = true;
            } else {
                map.remove(layer); //移除也有两种------1
                // imageLayer.removeByMap();//移除也有两种------2
            }
        }
        function flyTo() {
            layer.flyTo();
        }
        function setStyle() {
            const style = new Cesium.Cesium3DTileStyle({
                color: {
                    conditions: [
                        ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
                        ["${Height} >= 200", "rgb(102, 71, 151)"],
                        ["${Height} >= 100", "rgb(170, 162, 204)"],
                        ["${Height} >= 50", "rgb(224, 226, 238)"],
                        ["${Height} >= 25", "rgb(252, 230, 200)"],
                        ["${Height} >= 10", "rgb(248, 176, 87)"],
                        ["${Height} >= 5", "rgb(198, 106, 11)"],
                        ["true", "rgb(127, 59, 8)"],
                    ],
                },
                show: "${Height} > 0",
            });
            layer.setStyle(style);
        }
        function setCustomShader() {
            let fs = `
        varying vec3 v_positionEC;
        void main(void){
            vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
            float glowRange = 100.0; // 光环的移动范围(高度)
            gl_FragColor = vec4(0.2,  0.5, 1.0, 1.0); // 颜色
            gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
            // 动态光环
            float time = fract(czm_frameNumber / 360.0);
            time = abs(time - 0.5) * 2.0;
            float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
            gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
        }
        `;
            layer.setShader(fs);
        }
        function setTilesetHeight() {
            layer.setHeight(100);
        }
        function setTilesetScale() {
            layer.setScale(0.5, 0.5, 0.5);
        }
        function setRotate() {
            layer.setRotate(90, 0, 0);
        }
        function setPosition() {
            layer.setPosition(119, 26, 1000);
        }
        function update3dtilesMaxtrix() {
            layer.updateMaxtrix({
                position: {
                    x: 119,
                    y: 26,
                    z: 0,
                },
                rotate: {
                    x: 0,
                    y: 0,
                    z: 0,
                },
                scale: {
                    x: 2,
                    y: 2,
                    z: 2,
                },
            });
        }

    </script>
</body>

</html>